<template>
  <div>
    <ul class="article" v-if="CollectionArticles.length > 0">
      <li
        v-for="(item, article_id) in CollectionArticles"
        :key="article_id"
        @click="details(item.article_id)"
        class="collection-articles"
      >
        <!-- 文章标题 -->
        <div class="title">{{ item.article_title }}</div>

        <!-- 文章摘要 -->
        <div class="abstract">{{ item.article_summary }}</div>

        <!-- 收藏时间 -->

        <div class="collection-time">
          收藏时间&nbsp;&nbsp;{{ item.favorite_date.slice(0, 10) }}
        </div>
      </li>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="collectionNum * 10"
        @current-change="CollectionPage"
        :current-page="collectionPage"
      >
      </el-pagination>
    </ul>
    <el-empty v-else :image-size="200"></el-empty>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "Collection",
  mixins: [mixin],
  data() {
    return {
      collectionPage: 1, //收藏文章页数
      collectionNum: "", //收藏文章页数
      CollectionArticles: [], //收藏文章
      uid: "",
    };
  },
  methods: {
    //切换收藏页码
    CollectionPage(val) {
      this.CollectionArticles = [];
      this.collectionPage = val;
      this.collectionArticles();
    },
    //收藏文章加载
    collectionArticles() {
      this.$http({
        method: "post",
        url: "search/searchFavoriteArticles",
        params: {
          pageNum: this.collectionPage, //页码（默认为1）
          pageSize: 10,
          uid: this.uid,
        },
      }).then(({ data }) => {
        if (data.flag) {
          console.log("收藏夹文章加载成功!");
          if (data.data) {
            this.CollectionArticles = data.data[0].list;
            this.collectionNum = Math.ceil(data.data[0].total / 10);
          }
        } else {
          console.log("收藏夹文章加载失败!");
        }
      });
    },
  },
  mounted() {
    let userData = JSON.parse(sessionStorage.getItem("LoginMessage")).message;
    let query = this.$route.query;
    if (query.id) {
      this.uid = query.id;
    } else {
      this.uid = userData.uid;
    }
    this.collectionArticles();
  },
};
</script>

<style lang="less" scoped>
//文章列表渲染
.article {
  width: 100%;
  padding-bottom: 70px;
  li {
    cursor: pointer;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #e4e7ed;
    color: #4b4a4a;
    .title {
      width: 250px;
      font-size: 20px;
      letter-spacing: 2px;
      margin: 10px 0px;
      color: #302f2f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        color: orangered;
      }
    }
    .abstract {
      margin: 20px 0px;
      width: 100%;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .label {
      width: 30px;
      font-size: 12px;
      height: 15px;
      padding: 3px;
      text-align: center;
      background-color: rgba(227, 62, 51, 0.1);
      color: #e33e33;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
}
.el-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
.collection-articles {
  position: relative;
  height: 100px !important;
  .collection-time {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
  }
  .abstract {
    font-size: 16px;
    height: 50px;
  }
}
</style>